.datetime-container
    position relative

    .small-panel
        min-width 256px
        height 55px
        background $bg-color
        display flex
        align-items center
        justify-content space-between
        cursor pointer
        word-break keep-all
        white-space nowrap

        .clock-icon
            font-size $body-font-size * 2
            cursor pointer

    .main-panel
        .main-panel-header
            height $ui-nomal-height
            background $bg-color
            padding 0 $ui-normal-padding
            display flex
            align-items center
            justify-content space-between

            .close-icon
                cursor pointer

        .main-panel-body
            padding-bottom $ui-normal-padding * 2 - 8px

            .option-describe
                height $ui-nomal-height
                display flex
                flex-direction column
                justify-content center
                align-items center

            .datetime-options
                padding 0 $ui-normal-padding
                display flex
                flex-direction column
                align-items center

                .datetime-options-line:not(:last-child)
                    margin-bottom $ui-normal-margin

                .datetime-options-line
                    display flex
                    justify-content center
                    width 292px
                    flex-wrap wrap
                    align-items center

                    div:not(:last-child)
                        margin-right $ui-normal-margin
                        margin-bottom $ui-normal-margin

                    label
                        width 80px
                        height $ui-normal-padding * 2
                        font-size $body-font-size
                        border-radius $ui-border-radius
                        text-align center
                        background $bg-color
                        border none

    .custom-panel
        .custom-panel-header
            height $ui-nomal-height
            background $bg-color
            padding 0 $ui-normal-padding
            display flex
            align-items center
            justify-content space-between

            .close-icon
                cursor pointer

        .custom-panel-body
            padding $ui-normal-padding $ui-normal-padding 0 $ui-normal-padding

            .date
                margin-bottom $ui-normal-padding
                display flex
                align-items center

                span
                    margin-right 8px

        .custom-panel-footer
            height $ui-nomal-height
            padding 0 $ui-normal-padding
            display flex
            justify-content flex-end
            align-items center
            border-top 1px solid #E5E5E5

            button:not(:last-child)
                margin-right $ui-normal-margin

.datetime-container
    .main-panel, .custom-panel
        width 315px
        box-shadow 0 2px $ui-normal-margin rgba(0, 0, 0, 0.1)
        position absolute
        z-index 10
        background $active-font-color
        border 1px solid #d9d9d9

.display-custom-time
    text-align right
    margin-left 8px
    overflow: hidden;

.datetime-container
    .main-panel
        &::before
            content ' '
            position absolute
            display inline-block
            width 10px
            height 10px
            border 1px solid #d9d9d9
            background-color #f5f5f5
            border-left 0
            border-top 0
            left 20px
            top -6px
            -webkit-transform rotate(225deg)
            -ms-transform rotate(225deg)
            transform rotate(225deg)

        // &::after
        //     content ' '
        //     position absolute
        //     display inline-block
        //     left 5px
        //     top -$ui-normal-margin
        //     border-right $ui-normal-margin solid transparent
        //     border-bottom $ui-normal-margin solid $bg-color
        //     border-left $ui-normal-margin solid transparent

.ant-radio-group-solid .ant-radio-button-wrapper-checked
    background var(--primary-color) !important

.ant-calendar-picker-input.ant-input
    height $ui-normal-padding * 2
    padding-left $body-font-size
    padding-right $body-font-size

.ant-calendar .ant-calendar-footer
    .ant-calendar-today-btn
        color rgba(0, 0, 0, 0.65)
        border 1px solid #e5e5e5
        height $ui-normal-padding * 2
        line-height 30px
        width 60px
        border-radius $ui-border-radius
        margin-top $body-font-size
        margin-top 12px !important


    .ant-calendar-ok-btn
        // background $active-bg-color
        color $active-font-color
        height $ui-normal-padding * 2
        line-height 30px
        width 60px
        border-radius $ui-border-radius

    .ant-calendar-footer-btn
        .ant-calendar-time-picker-btn
            color rgba(0, 0, 0, 0.65)

.ant-calendar-selected-day .ant-calendar-date
    background $active-bg-color
    color $active-font-color

.ant-calendar-picker-container .ant-calendar-time .ant-calendar-footer
    line-height $ui-nomal-height

.ant-calendar-time-picker-select .ant-calendar-time-picker-select-option-selected
    background $active-bg-color
    color $active-font-color

.vertical-mode
    display flex
    align-items center

    ul
        display flex
        font-family PingFangSC-Regular
        color rgba(0, 0, 0, 0.65)

        li
            margin-right 16px

            &:hover
                cursor pointer

.active
    color $active-color

.has-border
    // margin-right $ui-normal-padding
    // width 340px

    display-custom-time
        margin-left 0

    .small-panel
        height 32px
        border 1px solid #d9d9d9
        padding 0 12px
        border-radius 4px
        background #fff
        color rgba(0, 0, 0, 0.65)

        .clock-icon
            font-size 18px

    .main-panel
        margin-top 10px
